<template>
  <div class="test-container">

    <draggable v-model="myArray">
      <div v-for="(obj,i) in myArray" :key="obj.id">
        <div style="border:1px solid #000000;">{{ obj.title }}</div>
      </div>
    </draggable>

  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  //组件名称
  name: "Test",
  //组件注册
  components: {draggable},
  //数据驱动
  data() {
    return {
      myArray: [
        {id: 1, title: "我是1号",},
        {id: 2, title: "我是2号",},
        {id: 3, title: "我是3号",},
        {id: 4, title: "我是4号",},
        {id: 5, title: "我是5号",}
      ]
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {},
  //钩子函数
  mounted() {
  }
}
</script>

<style scoped>
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>